<template>
  <div class="home">
    <header-nav :currentIndex="0"></header-nav>
    <h2 class="daili">
      城市代理
      <span>合伙人招募</span>
    </h2>
    <div class="vid">
      <!-- <video
        class="banner-pc-slider-background-video"
        src="../../assets/imgs/背景和装饰hud_1.mp4"
        preload="auto"
        autoplay="autoplay"
        loop="loop"
        style="display: block"
        muted
      ></video> -->
      <img
        src="../../assets/imgs/b0c51585138341b48b72e86725a4faa4.gif"
        alt=""
      />
    </div>
    <div class="hexin">
      <h2>核心产品</h2>
      <p class="title">全场景产品矩阵，构建运营与服务一体化</p>
      <div class="list">
        <ul>
          <li
            v-for="(item, index) in arr"
            :key="index"
            @click="handleSelectTab(index)"
            :class="[currentIndex === index ? 'current' : '']"
          >
            <img
              :src="currentIndex == index ? item.actived_src : item.src"
              alt=""
            />
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>
      <div class="shuzi" v-show="currentIndex === 0">
        <div class="im">
          <img src="../../assets/imgs/图层 288.png" alt="" />
        </div>
        <div class="cont">
          <p class="p-1">房产自媒体矩阵 获取免费流量</p>
          <p class="p-2">
            充分利用杭州作为网红之都、直播天堂的优势，整合众多网红、直播、运营、技术等资源，搭建自媒体矩阵。
          </p>
          <p class="p-2">
            深度结合房产营销，孵化房产IP，打造线上房产销售直播间，快速获取免费流量，源源不断提供精准有效的购房客户，实现快速转化成交。
          </p>
          <p class="p-2">
            整合全国房产自媒体大V，联合营销推广，抓取精准流量，实现项目异地推广、同城带看。
          </p>
        </div>
      </div>
      <div class="shuzi" v-show="currentIndex === 1">
        <div class="im">
          <img src="../../assets/imgs/图层 300.png" alt="" />
        </div>
        <div class="cont">
          <p class="p-1">流量效果运营降本提效</p>
          <p class="p-2">
            公司现提供房地产营销流量代运营服务，百人技术运营服务团队，进行短视频、信息流、搜索竞价等广告投放；
          </p>
          <p class="p-2">
            通过受众分析，独创流量模型，整合创意资源，帮助合作伙伴实现低成本快速获取精准线索；
          </p>
          <p class="p-2">
            精细的策划，出色的执行，实现精准获客，快速转化。从此无须盲打CALL客，让销售更加简单高效。
          </p>
        </div>
      </div>
      <div class="shuzi" v-show="currentIndex === 2">
        <div class="im">
          <img src="../../assets/imgs/图层 355.png" alt="" />
        </div>
        <div class="cont">
          <p class="p-1">客户留存、裂变、转化</p>
          <p class="p-2">
            充分利用杭州作为网红之都、直播天堂的优势，整合众多网红、直播、运营、技术等资源。
          </p>
          <p class="p-2">
            深度结合房产营销，孵化房产IP，打造线上房产销售直播间，快速获取免费流量，源源不断提供精准有效的购房客户，实现快速转化成交。
          </p>
          <p class="p-2">整合全国房产自媒体大V，搭建自媒体第一矩阵平台。</p>
        </div>
      </div>
      <div class="shuzi" v-show="currentIndex === 3">
        <div class="im">
          <img src="../../assets/imgs/图层 311.png" alt="" />
        </div>
        <div class="cont">
          <p class="p-1">进线、带看、成交一站式管理</p>
          <p class="p-2">
            来自阿里、百度、腾讯等大厂技术大牛，独家研发云SaaS营销系统，集合项目管理系统、CRM管理系统、预警管理系统；
          </p>
          <p class="p-2">
            以互联网技术，深度结合地产营销，将获客端、销售端、运营端全面打通，实现进线、带看、成交统一管理；
          </p>
          <p class="p-2">
            通过大数据分析，实现风险控制和数据优化，帮助合作伙伴降低获客成本，提升成交效率。
          </p>
        </div>
      </div>
      <div class="shuzi" v-show="currentIndex === 4">
        <div class="im">
          <img src="../../assets/imgs/图层 331.png" alt="" />
        </div>
        <div class="cont">
          <p class="p-1">房产数字化营销培训</p>
          <p class="p-2">
            新互联网时代，流量为王。房产分销、中介必须改变从过去传统的获客方式，进行转型升级，才能在竞争激烈的市场环境中活下来。
          </p>
          <p class="p-2">
            房象科技，以18年房产实战+数字化营销经验，提供数字化营销创新思维、数字化营销战法、新媒体革命、狼性销售等培训。
          </p>
        </div>
      </div>
    </div>
    <div class="hezuo">
      <h2>合作流程</h2>
      <img src="../../assets/imgs/1742.png" alt="" />
    </div>
    <div class="hangye">
      <h2>行业解决方案</h2>
      <div class="gang"></div>
      <ul>
        <li>
          <img class="cin" src="../../assets/imgs/图层 32.png" alt="" />
          <p class="p-0">精准获客</p>
          <img class="i-m" src="../../assets/imgs/图层 36.png" alt="" />
          <p class="p-1">
            独创流量模型，研究受众画像，整合创意资源，进行精准投放。
          </p>
          <p class="p-2">低成本快速获取精准线索</p>
          <p class="p-2">不盲打CALL客，电话不被封号</p>
          <p class="p-2">让销售更加简单高效</p>
        </li>
        <li>
          <img class="cin" src="../../assets/imgs/图层 33.png" alt="" />
          <p class="p-0">内容输出</p>
          <img class="i-m" src="../../assets/imgs/图层 37.png" alt="" />
          <p class="p-1">提供从策略、文案、拍摄、剪辑等一整套内容输出服务。</p>
          <p class="p-2">广告营销策略</p>
          <p class="p-2">内容策划和文案脚本</p>
          <p class="p-2">短视频拍摄、剪辑</p>
        </li>
        <li>
          <img class="cin" src="../../assets/imgs/图层 34.png" alt="" />
          <p class="p-0">云SaaS管理</p>
          <img class="i-m" src="../../assets/imgs/图层 36.png" alt="" />
          <p class="p-1">
            互联网结合地产营销，将获客端、销售端、运营端全面打通。
          </p>
          <p class="p-2">项目管理系统</p>
          <p class="p-2">CRM管理系统</p>
          <p class="p-2">预警监控系统</p>
        </li>
        <li>
          <img class="cin" src="../../assets/imgs/图层 35.png" alt="" />
          <p class="p-0">培训赋能</p>
          <img class="i-m" src="../../assets/imgs/图层 37.png" alt="" />
          <p class="p-1">从老板到员工，从思维、知识、实战等方面全面赋能。</p>
          <p class="p-2">数字化营销创新思维</p>
          <p class="p-2">数字化营销战法</p>
          <p class="p-2">新媒体革命</p>
        </li>
      </ul>
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
import HeaderNav from "../../components/Header.vue";
import FooterNav from "../../components/Footer.vue";
export default {
  components: {
    HeaderNav,
    FooterNav,
  },
  data() {
    return {
      currentIndex: 0,
      arr: [
        {
          title: "数字传媒",
          src: require("../../assets/imgs/4.png"),
          actived_src: require("../../assets/imgs/图层 28.png"),
        },
        {
          title: "数字化运营",
          src: require("../../assets/imgs/图层 26.png"),
          actived_src: require("../../assets/imgs/1.png"),
        },
        {
          title: "新零售商城",
          src: require("../../assets/imgs/图层 29.png"),
          actived_src: require("../../assets/imgs/5.png"),
        },
        {
          title: "云saas系统",
          src: require("../../assets/imgs/图层 30.png"),
          actived_src: require("../../assets/imgs/3.png"),
        },
        {
          title: "正则学院",
          src: require("../../assets/imgs/图层 27.png"),
          actived_src: require("../../assets/imgs/2.png"),
        },
      ],
    };
  },

  mounted() {},

  methods: {
    handleSelectTab(index) {
      console.log(index);
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
ul {
  list-style: none;
}
/deep/ .el-carousel__container {
  height: 790px;
}
/deep/ .el-carousel__container img {
  width: 100%;
  height: 100%;
}
.vid {
  width: 100%;
  // height: 900px;
}
.vid img {
  width: 100%;
  height: 100%;
}
.banner-pc-slider-background-video {
  width: 100%;
  height: 100%;
}
.home {
  overflow: hidden;
}
.daili {
  position: absolute;
  color: #fff;
  top: 250px;
  left: 250px;
  font-size: 60px;
  span {
    color: #011949;
    font-size: 70px;
  }
}
.hexin {
  margin: 60px 230px;
}
.hexin h2 {
  font-size: 55px;
  text-align: center;
}
.hexin p {
  text-align: center;
}
.hexin .title {
  margin: 20px 0;
}
.hexin .list ul {
  display: flex;
  justify-content: space-around;
  margin: 55px 120px 0;
  text-align: center;
}
.hexin .list ul li {
  display: flex;
  align-items: center;
  padding: 5px 7px;
  color: #cad4e1;
  border-bottom: 2px solid #cad4e1;
  cursor: pointer;
}
.hexin .list ul li img {
  width: 35px;
  height: 27px;
}
.hexin .list ul li.current {
  color: #111c55;
  border-bottom: 2px solid #0d1d49;
}
.hexin .list ul li p {
  margin-left: 10px;
  font-weight: bold;
}
.hezuo {
  width: 100%;
  height: 482px;
  background-image: url("../../assets/imgs/1720.png");
  background-size: 100% 100%;
  margin: 0 auto;
  text-align: center;
  padding: 50px 0;
}
.hezuo h2 {
  font-size: 55px;
}
.hezuo .title {
  margin: 20px 0 120px;
}
.hezuo img {
  width: 1156px;
  height: 245px;
  margin-top: 100px;
}
.hangye {
  margin: 80px 320px;
}
.hangye h2 {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}
.hangye .gang {
  width: 80px;
  border: 2px solid #04cb94;
  margin: 20px auto;
}
.hangye ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin-top: 60px;
}
.hangye ul li {
  width: 230px;
  height: 350px;
  display: table; /*主要是这个属性*/
  vertical-align: middle;
  text-align: center;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0px 3px 14px 5px #f3f3f3;
}
.hangye ul li:hover {
  background: #4372c3;
  color: #fff;
}
.hangye ul li .cin {
  width: 62px;
  height: 62px;
}
.hangye ul li .p-0 {
  font-size: 20px;
  margin: 10px 0 5px;
}
.hangye ul li .p-1 {
  margin: 20px 0 40px;
  line-height: 30px;
}
.hangye ul li .p-1,
.hangye ul li .p-2 {
  position: relative;
  text-align: left;
}
.hangye ul li .p-2 {
  left: 20px;
  margin-top: 10px;
  font-size: 15px;
}
.hangye ul li .p-2::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: -20px;
  top: 3px;
  background-image: url(../../assets/imgs/图层299.png);
  background-size: 100% 100%;
}
.hangye ul li .i-m {
  width: 35px;
  height: 2px;
}
.shuzi {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 60px 120px;
  animation: slideInRight; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}
.shuzi .im img {
  width: 553px;
  height: 364px;
}
.shuzi p {
  margin: 30px 0;
  text-align: left;
}
.shuzi .cont {
  width: 600px;
  margin-left: 50px;
}
.shuzi .cont .p-1 {
  font-size: 20px;
  font-weight: bold;
}
.shuzi .cont .p-2 {
  font-size: 16px;
  line-height: 35px;
  position: relative;
  left: 20px;
  color: #696767;
}
.shuzi .cont .p-2::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  left: -20px;
  top: 9px;
  background-image: url(../../assets/imgs/图层299.png);
  background-size: 100% 100%;
}
@media screen and (max-width: 1024px) {
  .hexin {
    margin: 60px 0px;
    padding: 0 100px;
    h2 {
      font-size: 120px;
    }
    .title {
      font-size: 70px;
    }
    .list {
      ul {
        margin: 100px 0 80px;
        justify-content: space-between;
        li {
          display: block;
          font-size: 55px;
          padding-bottom: 20px;
          border-bottom: 5px solid #cad4e1;
          img {
            width: 100px;
            height: 100px;
          }
        }
        li.current {
          color: #111c55;
          border-bottom: 5px solid #0d1d49;
        }
      }
    }
    .shuzi {
      display: block;
      margin: 60px 0px;
      p {
        margin: 50px 0;
      }
      .im {
        img {
          width: 100%;
          height: 1064px;
        }
      }
      .cont {
        width: 100%;
        margin-left: 0;
        margin-top: 100px;
        .p-1 {
          font-size: 90px;
          margin: 90px 0;
        }
        .p-2 {
          width: 96%;
          font-size: 70px;
          line-height: 120px;
          left: 110px;
          &::before {
            width: 85px;
            height: 85px;
            left: -110px;
            top: 20px;
          }
        }
      }
    }
  }
  .hezuo {
    width: 100%;
    height: 760px;
    margin-top: 150px;
    h2 {
      font-size: 90px;
    }
    img {
      width: 80%;
      height: 50%;
    }
  }

  .hangye {
    margin: 80px 0;
    h2 {
      font-size: 100px;
    }
    .gang {
      width: 180px;
      height: 10px;
      background: #04cb94;
      margin: 50px auto;
    }
    ul {
      display: block;
      margin-top: 160px;
      li {
        width: 80%;
        height: 1250px;
        display: table; /*主要是这个属性*/
        vertical-align: middle;
        text-align: center;
        border-radius: 5px;
        padding: 60px;
        margin: 50px auto;
        box-shadow: 0px 23px 34px 15px #ebebeb;
        .cin {
          width: 282px;
          height: 282px;
        }
        p {
          font-size: 70px;
          line-height: 80px;
        }
        .p-0 {
          font-size: 90px;
          margin: 60px 0 45px;
        }
        .p-1 {
          margin: 60px 0 40px;
          line-height: 100px;
        }
        .i-m {
          width: 160px;
          height: 10px;
        }
        .p-2 {
          left: 80px;
          margin-top: 80px;
          font-size: 60px;
          color: #696767;
          &::before {
            width: 55px;
            height: 55px;
            left: -80px;
            top: 3px;
          }
        }
      }
      li:hover {
        background: #4372c3;
        .p-2 {
          color: #fff !important;
        }
      }
    }
  }
}
</style>